<template>
  <div class="user">
    <el-row>
      <el-col :span="24">
        <el-breadcrumb separator="/">
          <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item><a href="/">用户管理</a></el-breadcrumb-item>
          <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div>
          <el-input placeholder="请输入内容"  class="search-input" v-model="query" @keydown.native.enter="initList">
            <el-button slot="append" icon="el-icon-search" @click="initList"></el-button>
          </el-input>
          <el-button type="success" plain @click="addDialogFormVisible=true">添加用户</el-button>
        </div>
      </el-col>
    </el-row>
    <el-table
      :data="userList"
      border
      style="width: 100%">
       <el-table-column
        type="index"
        width="50">
      </el-table-column>
      <el-table-column
        prop="username"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="email"
        label="邮箱"
        width="180">
      </el-table-column>
      <el-table-column
        prop="mobile"
        label="电话">
      </el-table-column>
      <el-table-column label="用户状态">
      <template slot-scope="scope">
        <el-switch  v-model="scope.row.mg_state" @change="changeState(scope.row)"></el-switch>
      </template>
    </el-table-column>
      <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button size="mini" icon="el-icon-edit" type="primary" plain @click="showDialog(scope.row)"></el-button>
        <el-button size="mini" icon="el-icon-delete" type="danger" plain @click="delUser(scope.row)"></el-button>
        <el-button size="mini" type="warning" icon="el-icon-check" plain @click="grandUserDislog(scope.row)"></el-button>
      </template>
    </el-table-column>
    </el-table>
     <div class="page">
        <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="1"
        :page-sizes="[1, 2, 3, 4]"
        :page-size="1"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
     </div>
     <!-- 添加用户表单 -->
      <el-dialog title="添加用户" :visible.sync="addDialogFormVisible">
        <el-form :model="addForm" :rules="rules" ref="addForm">
          <el-form-item label="用户名" prop="username">
            <el-input v-model="addForm.username" autocomplete="off"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
          <el-input v-model="addForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="addForm.email" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="电话" prop="mobile">
          <el-input v-model="addForm.mobile" autocomplete="off"></el-input>
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="addUser">确 定</el-button>
        </div>
    </el-dialog>
    <!-- 编辑用户 -->
    <el-dialog title="编辑用户" :visible.sync="editDialogFormVisible">
          <el-form :model="editForm" :rules="rules" ref="editForm">
            <el-form-item label="姓名" prop="username">
              <el-input v-model="editForm.username" autocomplete="off" :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="邮箱" prop="email">
              <el-input v-model="editForm.email" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="电话" prop="mobile">
              <el-input v-model="editForm.mobile" autocomplete="off"></el-input>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="editDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="editUser">确 定</el-button>
          </div>
    </el-dialog>
    <!-- 分配角色 -->
      <el-dialog title="分配角色" :visible.sync="grandDialogFormVisible">
          <el-form :model="grandForm">
            <el-form-item label="姓名">
              <el-tag type="info">{{grandForm.username}}</el-tag>
            </el-form-item>
             <el-form-item label="请选择角色">
              <el-select placeholder="请选择角色" value="请选择角色"  v-model="roleId">
                <el-option
                v-for="(item, index) in roleList"
                :key="index"
                :label="item.roleName"
                :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="grandDialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="grandUser">确 定</el-button>
          </div>
    </el-dialog>

  </div>
</template>
<script>
import {getUserList,addUserSubmit,changeUserState,getUserById,edittUserById,deleteUser,getRoleList,grandUserRole} from "@/api"
export default {
   data() {
      return {
        userList: [],
        value3:"",
        total:0,
        pagesize:10,
        pagenum:1,
        query:"",
        roleId:'',
        addDialogFormVisible:false,
        editDialogFormVisible:false,
        grandDialogFormVisible:false,
        addForm:{
          username:"",
          password:"",
          email:"",
          mobile:""
        },
        editForm:{
          username:"",
          email:"",
          mobile:"",
          id:0
        },
        grandForm:{
        },
        roleList:[],
        // 添加用户的表单验证
        rules: {
          username: [
            { required: true, message: '请输入用户名', trigger: 'blur' }
          ],
          password: [
            { required: true, message: '请输入密码', trigger: 'blur' }
          ],
          email: [
            { required: true, message: '请输入邮箱地址', trigger: 'blur' },
            { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur,change' }
          ],
          mobile: [
            { required: true, message: '电话不能为空' }
          ]
        }
      }
    },
    created(){
      this.initList();
    },
     methods: {
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.pagesize=val
        this.initList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.pagenum=val
        this.initList()
      },
      //初始化用户
      initList(){
        getUserList({params:{query:this.query,pagenum:this.pagenum,pagesize:this.pagesize}}).then(res=>{
          console.log(res)
          this.userList=res.data.users
          this.total=res.data.total
        })
      },
      //添加用户
      addUser(){
        this.$refs.addForm.validate(res=>{
          if(res){
            addUserSubmit(this.addForm).then(res=>{
              this.$message({
              type:"success",
              message:"添加用户成功"
          })
          this.addDialogFormVisible=false
          this.initList()
        })
        }
        })
      },
      //改变用户状态
      changeState(row){
        changeUserState({uId:row.id,type:row.mg_state}).then(res=>{
          if(res.meta.status===200){
            this.$message({
            type:"success",
            message:"更改状态成功"
          })
          }else{
            this.$message({
            type:"success",
            message:"更改状态成功"
          })
          }
        })
      },
      //根据id获取数据
      showDialog(row){
        this.editDialogFormVisible=true
        this.editForm.username=row.username
        this.editForm.email=row.email
        this.editForm.mobile=row.mobile
        this.editForm.id=row.id
      },
      //根据id获取的数据完成编辑
      editUser(){
        edittUserById(this.editForm).then(res=>{
          this.$refs.editForm.validate(res=>{
            if(res){
              edittUserById(this.editForm).then(res=>{
                if(res.meta.status===200){
                  this.$message({
                    type:"success",
                    message:"修改用户成功"
                  })
                  this.editDialogFormVisible=false
                  this.initList()
                }else{
                  this.$message({
                    type:"warning",
                    message:res.meta.msg
                  })
                }
              })
            }
          })
        })
      },
      // 删除用户
      delUser(row){
        this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          //删除数据
          deleteUser(row.id).then(res=>{
            this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.initList()
          })

        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      //获取角色
      grandUserDislog(row){
        this.grandForm=row
        console.log(this.grandForm)
        this.grandDialogFormVisible=true
        this.grandForm.username=row.username
        getRoleList().then(res=>{
          this.roleList=res.data
        })
      },
      //分配角色
      grandUser(){
        console.log(this.roleId)
        grandUserRole({id:this.grandForm.id,rid:this.roleId}).then(res=>{
          if (res.meta.status === 200) {
            this.$message({
              type: 'success',
              message: '设置角色成功'
            })
              this.grandDialogFormVisible=false;
            } else {
              this.$message({
              type: 'error',
              message: res.meta.msg
            })
          }
        })
      }
    },
}
</script>
<style scoped lang="less">
.user {
  .search-input {
    width: 300px;
  }
  .page {
    padding: 5px 0;
    background-color: #D3DCE6;
  }
}
</style>



